<template>
    <div class="matchinfo">
        <div class="flex1box">
            <header>
                <Headinfo :expert="expert" :attentionfn="followfn"/>
            </header>
            <aside class="topdescribe" v-if="expert">
                <p>{{replay||title}}</p>
                <template v-if="showshoucang">
                    <span @click="collectRecommend(collect)">
                        <icon v-if="collect" name="collected"></icon>
                        <icon v-else name="collect"></icon>
                        <b>收藏</b>
                    </span>
                </template>
                <template v-if="shoufupan">
                    <span @click="fpclick">
                        <icon name="notepad"></icon>
                        <b>复盘</b>
                    </span>
                </template>
            </aside>
            <ul class="listtable">
                <li v-for="(item,index) in matches" :key="index">
                    <div class="header">
                        <em>{{item.no}}</em>
                        <strong>截止 {{item.deadline}}</strong>
                        <b :class="item.state | getStateclass">{{timeState | getStatevalue}}</b>
                        <i v-if="timeState!=0"><img
                                :src="timeState | getwinstateimg" alt=""></i>
                    </div>
                    <p class="matchtitle">
                        <b>让球</b>
                        <span>
                        {{item.home}}<em>{{item.score}}</em>{{item.visitor}}
                    </span>
                    </p>
                    <dl class="tablecon">
                        <dd v-for="(itemc,cindex) in item.bet">
                            <em>{{itemc.rq}}</em>
                            <p>
                                <span :class="[itemc.bet==='3'?'selected':'']">
                                    <strong>主胜</strong>
                                    <b>{{itemc.sp | getspslitthree}}</b>
                                    <icon v-if="itemc.result==='3'" name="face" class="greenright"></icon>
                                </span>
                                <span :class="[itemc.bet==='1'?'selected':'']">
                                    <strong>平</strong>
                                    <b>{{itemc.sp | getspslitone}}</b>
                                    <icon v-if="itemc.result==='1'" name="face" class="greenright"></icon>
                                </span>
                                <span :class="[itemc.bet==='0'?'selected':'']">
                                    <strong>客胜</strong>
                                    <b>{{itemc.sp | getspslitzero}}</b>
                                    <icon v-if="itemc.result==='0'" name="face" class="greenright"></icon>
                            </span>
                            </p>
                        </dd>
                    </dl>
                </li>
            </ul>
            <footer class="recommendedreason">
                <h6>推荐理由：</h6>
                <p v-if="showReson">{{reason}}</p>
                <p v-else>支付后显示推荐方案内容和理由</p>
            </footer>
            <span class="tips">观点建议仅供参考，投注需谨慎</span>
        </div>
        <footer class="buyopcon" v-if="shouldShowOrderBtm">
            <div class="infocon">
                <span>需支付：<strong>{{bean}}彩豆<em v-if="back"> (不中返还)</em></strong></span>
                <b>售卖截止：{{deadline}}</b>
            </div>
            <a href="javascript:;" @click="payfn">立即支付</a>
        </footer>
        <a v-if="showOver" class="overmatch" href="javascript:;">赛事已截止</a>
        <div v-transfer-dom>
            <popup v-model="showfpan" position="top">
                <div class="fupanbox">
                    <group>
                        <x-textarea :max="200" v-model="content" placeholder="说说自己复盘的想法"></x-textarea>
                    </group>
                    <group>
                        <x-button text="提交" @click.native="submitfp" type="primary"></x-button>
                    </group>
                    <group>

                    </group>
                </div>
            </popup>
        </div>
    </div>
</template>

<script>
    import {isEmpty} from 'ramda';
    import Headinfo from '../../components/Headinfo.vue';
    import {getMytoken, getLogintoken} from '../../service/common';
    import {recommendmatchdetailsR, collectRecommedR, uncollectRecommedR} from '../../service/matchs';
    import {godFollowR, godReplayR} from '../../service/god';
    import {Popup, TransferDom, XTextarea, Group, XButton} from 'vux';
    export default {
        directives: {
            TransferDom
        },
        components: {
            Headinfo, Popup, XTextarea, Group, XButton
        },
        data() {
            return {
                planId: null,
                matches: [],
                expert: null,
                title: '',
                reason: '',
                bean: 0,
                back: false,
                deadline: '',
                collect: false,
                paid: false,
                timeState: -1,
                showfpan: false,
                replay: null,
                content: '',
            };
        },
        filters: {
            getStatevalue(val){
                //0.未开始 1.进行中 2.已结束
                switch (val) {
                    case 0:
                        return '未开始';
                    case 1:
                        return '进行中';
                    case 2:
                        return '已结束';
                }
            },
            getStateclass(val){
                switch (val) {
                    case 0:
                        return 'nostart';
                    case 1:
                        return 'doing';
                    case 2:
                        return 'over';
                }
            },
            getspslitthree(val){
                return val.split(',')[0]
            },
            getspslitone(val){
                return val.split(',')[1]
            },
            getspslitzero(val){
                return val.split(',')[2]
            },
            getwinstateimg(val){
                if(val === 1) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/m_m1@3x.png';
                }
                if(val === 2) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/m_m2@3x.png';
                }

            }

        },
        created() {
            const {id}=this.$route.params;
            this.planId = id;
            this.getRecommendMatchDetailsById(id);
        },
        computed: {
            shouldShowOrderBtm(){
                const {expert, bean, paid, timeState}=this;
                //自己不显示、免费不显示,买过不显示,未销售的不显示
                if(expert && expert['zj']) {
                    return false;
                }
                if(bean === 0) {
                    return false;
                }
                if(paid) {
                    return false;
                }
                if(timeState != 0) {
                    return false;
                }
                return true;
            },
            showOver(){
                const {timeState, expert}=this;
                if([0, 1].indexOf(timeState) > -1) {
                    return false;
                }
                if(expert && expert['zj']) {
                    return false;
                }
                return true;
            },
            showReson(){
                const {timeState, expert, bean, paid}=this;
                if(expert && expert.zj) {
                    return true;
                }
                if(timeState === 2) {
                    return true;
                }
                if(bean === 0) {
                    return true;
                }
                if(paid) {
                    return true;
                }
                return false;
            },
            showshoucang(){
                const {expert}=this;
                if(expert && expert.zj) {
                    return false
                }
                return true;
            },
            shoufupan(){
                const {expert}=this;
                if(expert && expert.zj) {
                    return false
                }
            },
        },
        methods: {
            async getRecommendMatchDetailsById(id){
                const {token}=await getMytoken(true);
                const {data}=await recommendmatchdetailsR(id, token);
                if(data && data.code === 0) {
                    const {expert, matches, title, replay, collect, reason, paid, winState, timeState, bean, back, deadline}=data.data;
                    this.expert = expert;
                    this.matches = matches;
                    this.reason = reason;
                    this.title = title;
                    this.winState = winState;
                    this.timeState = timeState;
                    this.back = back;
                    this.bean = bean;
                    this.deadline = deadline;
                    this.paid = paid;
                    this.collect = collect;
                    this.replay = replay;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }

            },
            async collectRecommend(collect){
                const {planId}=this;
                const {token}=await getMytoken();

                const fn = collect ? uncollectRecommedR : collectRecommedR;
                const {data}=await fn(token, {planId});
                if(data && data.code === 0) {
                    this.collect = !collect;
                    this.$vux.toast.text(collect ? '取消成功' : '收藏成功');
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            fpclick(){
                if(this.replay) {
                    this.$vux.toast.text('您已经复盘过了');
                    return;
                }
                this.showfpan = !this.showfpan;
            },
            async followfn(){
                const {followed, uid}=this.expert;
                const {token}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text('未获取到用户信息');
                    return;
                }
                const {data}=await godFollowR({follow: followed, token, godid: uid});
                if(data && data.code == 0) {
                    this.$vux.toast.text(followed ? '取关成功' : '关注成功');
                    this.expert.followed = !followed;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async payfn(){
                const {token, Mobile}= await getMytoken();
                const isWx = isWeixin();
                if(isWx && Mobile === '') {
                    store.commit('common/changevalue', {showBindPhone: true});
                    return;
                }
                this.$router.push(`/security/pay/${this.planId}`);
            },
            async submitfp(){
                const {content, planId}=this;
                const {token} =await getMytoken();
                const {data}=await godReplayR({token, content, planId});
                if(data && data.code === 0) {
                    this.showfpan = false;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }


            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .matchinfo {
        height: 100%;
        display: flex;
        flex-direction: column;
        .flex1box {
            flex: 1;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
        }
        header {
            display: flex;
            background: #fff;
            margin-bottom: 20px;
            padding: 30px;
        }
        .topdescribe {
            box-sizing: border-box;
            border-bottom: 1px solid @color12;
            background: #fff;
            min-height: 102px;
            display: flex;
            align-items: center;
            p {
                flex: 1;
                padding: 10px 20px;
                font-size: @fz30;
                color: #333;
                word-break: break-all;
            }
            span {
                width: 106px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                font-size: @fz24;
                color: @color3;
                position: relative;
                &::after {
                    content: ' ';
                    position: absolute;
                    left: 0;
                    border-right: 1px solid @color12;
                    height: 51px;
                }
                svg {
                    color: @colororange;
                    width: 42px;
                    height: 42px;
                }
            }
        }
        .listtable {
            li {
                border-bottom: 1px solid @color12;
                padding: 0 24px 0 34px;
                background: #fff;
                .header {
                    height: 122px;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    position: relative;
                    em {
                        font-size: @fz24;
                        color: @colororange;
                    }
                    strong {
                        font-size: @fz26;
                        color: @color3;
                        margin: 0 40px;
                    }
                    b {
                        .setnormalcss(28px);
                        color: #fff;
                        padding: 0 10px;
                        font-size: @fz24;
                        &.doing {
                            background: @color17;
                            color: #fff;
                        }
                        &.over {
                            background: @color4;
                            color: #fff;
                        }
                        &.nostart {
                            background: @colororange;
                            color: #fff;
                        }
                    }
                    i {
                        width: 90px;
                        height: 90px;
                        position: absolute;
                        right: 40px;
                        img {
                            display: block;
                            width: 100%;
                        }
                    }
                }
                .matchtitle {
                    b {
                        color: @color2;
                    }
                    line-height: 1;
                    display: flex;
                    span {
                        flex: 1;
                        text-align: center;
                        font-size: @fz30;
                        font-weight: bolder;
                        em {
                            margin: 0 24px;
                        }
                    }
                }
                .tablecon {
                    margin: 28px 0 40px 0;
                    dd {
                        margin-bottom: 17px;
                        display: flex;
                        height: 78px;
                        em {
                            width: 56px;
                            margin-right: 27px;
                            background: #f8f8f8;
                            text-align: center;
                            line-height: 78px;
                            color: @color2;
                            border-radius: 4px;
                            display: inline-block;
                        }
                        p {
                            flex: 1;
                            display: flex;
                            background: #f8f8f8;
                            border-radius: 8px;
                            overflow: hidden;
                            span {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                align-items: center;
                                border-right: 1px solid #fff;
                                overflow: hidden;
                                position: relative;
                                &.selected {
                                    background: @colororange;
                                    color: #fff;
                                    b {
                                        color: #fff;
                                    }
                                }
                                &:last-child {
                                    border: none;
                                }
                                strong {
                                    font-size: @fz26;
                                    line-height: 1;
                                }
                                b {
                                    line-height: 1;
                                    font-size: @fz24;
                                    color: @color2;
                                }
                                .greenright {
                                    width: 38px;
                                    height: 38px;
                                    color: #a0d141;
                                    position: absolute;
                                    right: 20px;
                                    background: #fff;
                                    border-radius: 50%;
                                }
                            }
                        }
                    }
                }
            }
        }
        .recommendedreason {
            background: #fff;
            padding: 0 24px 0 34px;
            h6 {
                height: 90px;
                font-size: @fz32;
                line-height: 90px;
            }
            p {
                font-size: @fz30;
                font-weight: bolder;
                padding-bottom: 50px;
                word-wrap: break-word;
                word-break: normal;
            }
        }
        .tips {
            font-size: @fz26;
            color: @color3;
            line-height: 100px;
            text-align: center;
            display: block;
        }
        .buyopcon {
            height: 100px;
            display: flex;
            border-top: 1px solid @color12;
            background: #fff;
            .infocon {
                flex: 1;
                display: flex;
                flex-direction: column;
                padding-left: 20px;
                justify-content: center;
                span {
                    font-size: @fz30;
                    color: #333;
                    line-height: 1;
                    strong {
                        color: @colororange;
                        em {
                            font-size: 20px;
                            display: inline-block;
                        }
                    }
                }
                b {
                    font-size: @fz24;
                    color: @color3;
                }
            }
            a {
                background: @color22;
                color: #fff;
                .setnormalcss(100px);
                width: 222px;
                font-size: @fz36;
            }
        }
        .overmatch {
            height: 100px;
            display: flex;
            border-top: 1px solid @color12;
            background: @color3;
            color: #fff;
            align-items: center;
            justify-content: center;
            font-size: @fz36;
        }
    }


</style>